<!-- -->
<template>
  <div class="home-box">
    <div class="header">
      <p @click="jumpCity">
        {{ address }}
        <van-icon name="arrow-down" />
      </p>
      <h5>宏烨找房</h5>
      <p>
        <van-icon name="user-circle-o" size="20px" />
      </p>
    </div>
    <div class="con">
      <div class="box-tip">
        <div class="tips">
          <a
            href="javascript:;"
            v-for="(item, index) in tip"
            :key="index"
            @click="goInfo(item.path, item.id)"
          >
            <img :src="item.img" alt />
            <p>{{ item.title }}</p>
          </a>
        </div>
        <div class="notice">
          <van-notice-bar left-icon="volume-o" text="最新动态：海口小区40平方小户型热销中 最新动态：海口小区40平方小户型热销中" />
        </div>
      </div>

      <div class="home-center">
        <a href="javascript:;" v-for="(item, index) in list" :key="index">
          <img :src="item.img" alt />
          <p>{{ item.title }}</p>
        </a>
      </div>

      <div class="swiper">
        <h3>团购优惠</h3>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <dl>
              <dt>
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zx123.cn%2FResources%2Fzx123cn%2Fuploadfile%2F2015%2F1201%2F2d01dee2438716b60b37c6ffed4882f7.jpg&refer=http%3A%2F%2Fimg.zx123.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632743450&t=2ac771a13ef56c77471cc2723502691d"
                  alt
                />
              </dt>
              <dd>
                <p>
                  <span>汤臣一品</span>
                </p>
                <p>
                  <span>海口-龙华区 | 建面136~144㎡</span>
                </p>
                <div class="bot">
                  <span>3天10小时</span>
                  <p>
                    36001
                    <span>元/㎡</span>
                  </p>
                </div>
              </dd>
            </dl>
            <div class="bottom">
              <span>独家</span>
              <span>全款89折优惠</span>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <dl>
              <dt>
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.guipin.com%2Fzixun%2Fupload%2Fportal%2F20201211%2Fc9cd0a09dba8485b6fa6b0dc70d2a722.jpg&refer=http%3A%2F%2Fwww.guipin.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632743450&t=9ac103e9da9604b94d395f0e922f9950"
                  alt
                />
              </dt>
              <dd>
                <p>
                  <span>汤臣一品</span>
                </p>
                <p>
                  <span>海口-龙华区 | 建面136~144㎡</span>
                </p>
                <div class="bot">
                  <span>3天10小时</span>
                  <p>
                    36001
                    <span>元/㎡</span>
                  </p>
                </div>
              </dd>
            </dl>
            <div class="bottom">
              <span>独家</span>
              <span>全款89折优惠</span>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <dl>
              <dt>
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zx123.cn%2FResources%2Fzx123cn%2Fuploadfile%2F2015%2F0910%2F33dacc49b02514ae640097dd6e60cc30.jpg&refer=http%3A%2F%2Fimg.zx123.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632743450&t=d36eb3005721f523a7ef2436d44841bc"
                  alt
                />
              </dt>
              <dd>
                <p>
                  <span>汤臣一品</span>
                </p>
                <p>
                  <span>海口-龙华区 | 建面136~144㎡</span>
                </p>
                <div class="bot">
                  <span>3天10小时</span>
                  <p>
                    36001
                    <span>元/㎡</span>
                  </p>
                </div>
              </dd>
            </dl>
            <div class="bottom">
              <span>独家</span>
              <span>全款89折优惠</span>
            </div>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/3</div>
          </template>
        </van-swipe>
      </div>

      <div class="tab">
        <van-tabs v-model="active" sticky @click="changeActive">
          <van-tab v-for="(item, index) in tabList" :key="index" :title="item">
            <div v-for="(val, i) in tabData" :key="i" class="classify-item">
              <img :src="val.img" alt />
              <div class="classify-info">
                <p>
                  <span>在售</span>
                  <span>{{ val.listingTitle }}</span>
                </p>
                <div>{{ val.area }}|建面{{ val.houseArea }}</div>
                <p>{{ val.sellingprice }}万元/套</p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { navList, infoList } from "@/data/NavList.js";
import { getTabList } from "@/api";
export default {
  // import引入到组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      tip: navList,
      list: infoList,
      tabList: ["新房", "二手房", "商铺", "写字楼", "租房"],
      active: 0,
      tabData: [],
      current: 0
    };
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState(["address"])
  },
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    goInfo(path, id) {
      if (id === 3 || id === 4 || id === 6) {
        this.$router.push(`/house/${id}`).catch(err => err);
      } else {
        this.$router.push(path).catch(err => err);
      }
    },
    jumpCity() {
      this.$router.push("/city");
    },
    // 请求tab数据 e是 tab标题的下标
    changeActive(e) {
      this.active = e;
      this.getTabData();
    },
    //请求数据
    getTabData() {
      getTabList({ classify: this.active + 1 }).then(res => {
        this.tabData = res.data;
      });
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    // 调用请求数据接口
    this.getTabData();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.home-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
  position: sticky;
  background: #fff;
  z-index: 30;
  top: 0;
}

.con {
  width: 100%;
  height: auto;
  background: #f2f2f2;
}
.box-tip {
  width: 100%;
  height: auto;
  background: #fff;
}
.tips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.tips > a {
  padding-top: 20px;
  display: inline-block;
  width: 25%;
  text-align: center;
}
.tips > a > img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.tips > a > p {
  font-size: 14px;
  color: #777;
}

.notice {
  margin-top: 25px;
}

.home-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px 0;
  justify-content: center;
  background: #fff;
  margin-top: 20px;
}
.home-center > a {
  width: 25%;
  text-align: center;
}
.home-center > a > img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.home-center > a > p {
  font-size: 14px;
  color: #777;
}

.my-swipe .van-swipe-item {
  height: auto;
}

.swiper {
  width: 100%;
  height: auto;
  margin-top: 20px;
  padding: 15px;
  background: #fff;
}

.swiper h3 {
  padding-bottom: 10px;
}

.swiper dl {
  display: flex;
}

.swiper dl > dt > img {
  width: 100px;
  height: 80px;
}
.swiper dl > dd {
  padding-left: 10px;
}

.swiper dl > dd > p:nth-of-type(1) > span {
  display: flex;
  font-size: 18px;
}

.swiper dl > dd > p:nth-of-type(2) > span {
  font-size: 14px;
  color: #ccc;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.bot {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}

.bot > p {
  font-size: 18px;
}
.bot > p > span {
  font-size: 14px;
}

.bottom {
  display: flex;
  width: 100%;
  height: 35px;
  background: #ccc;
  margin-top: 10px;
  align-items: center;
  padding: 10px;
}
.bottom > span:nth-of-type(1) {
  padding: 3px 5px;
  background: #f2f2f2;
}

.bottom > span:nth-of-type(2) {
  padding-left: 20px;
}

.classify-item {
  display: flex;
  padding: 10px;
  img {
    width: 100px;
    height: 100px;
  }
  .classify-info {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    justify-content: space-between;
    p {
      display: flex;
      span:nth-of-type(1) {
        display: flex;
        justify-content: center;
        padding: 4px 7px;
        background: #ccc;
        font-size: 14px;
      }
      span:nth-of-type(2) {
        font-size: 18px;
        padding-left: 15px;
      }
    }
  }
}

.tab {
  width: 100%;
  height: auto;
  margin-top: 20px;
  background: #fff;
}
</style>
